import React, { useContext, useEffect } from 'react'
import { Switch, Drawer, Image, Form } from 'antd'
import { CloseOutlined, MinusOutlined, SettingOutlined } from '@ant-design/icons'
import GlobalContext from './GlobalContext'
import Line from './Line'
import '../assets/title.css'
import logo from '../assets/logo.png'

const { listener } = window.api.title
const { winOpt, switchLng } = window.api.common
const config = window.api.config
const lngRef = React.createRef()
const { ipcRenderer } = window.require('electron')

const settingForm = React.createRef()

function Title() {
  const { t } = useContext(GlobalContext)
  const [open, setOpen] = React.useState(false)
  const [setting, setSetting] = React.useState({})

  useEffect(() => {
    listener(settingForm, t)
    setSetting(config.getData())
  }, [])

  return (
    <GlobalContext.Consumer>
      {(context) => {
        return (
          <div className="tool-bar">
            <div className="tool-bar-funcs">
              <div className="tool-bar-funcs-item" onClick={() => winOpt('winClose')}>
                <div className="tool-bar-func-item-inner close-color">
                  <CloseOutlined className="icon-title" />
                </div>
              </div>
              <div className="tool-bar-funcs-item" onClick={() => winOpt('winMini')}>
                <div className="tool-bar-func-item-inner mini-color">
                  <MinusOutlined className="icon-title" />
                </div>
              </div>
            </div>
            <div
              className="tool-bar-setting"
              onClick={() => {
                setOpen(true)
                ipcRenderer.send('isAutoLaunch')
              }}
            >
              <SettingOutlined style={{ color: '#28C841' }} />
            </div>
            {/*  设置 */}
            <Drawer
              title={<span className="main-font-color">{context.t('setting')}</span>}
              placement="bottom"
              key="drawer_"
              width={200}
              height={260}
              open={open}
              onClose={() => setOpen(false)}
              closeIcon={null}
              style={{ backgroundColor: '#2c3f50' }}
              extra={
                <div className="setting-close main-font-color" onClick={() => setOpen(false)}>
                  {context.t('close')}
                </div>
              }
            >
              <Form ref={settingForm} className="main-font-color">
                <div className="setting-container">
                  <div className="setting-item" style={{ paddingBottom: '10px' }}>
                    <div className="setting-logo">
                      <Image src={logo} preview={false} />
                    </div>
                    <div className="setting-item-1st">
                      <span>{context.t('author')}</span>
                    </div>
                  </div>
                  <Line bottom={5} />
                  <div className="setting-item">
                    <span>{context.t('min2status')}</span>
                    <span>
                      <Switch defaultChecked={true} disabled={true} className="switch-style" />
                    </span>
                  </div>
                  <div className="setting-item">
                    <span>{context.t('lngToggle')}</span>
                    <span>
                      <Switch
                        ref={lngRef}
                        checkedChildren="中"
                        unCheckedChildren="En"
                        defaultChecked={setting.lng === 'zh'}
                        onChange={(checked) => {
                          switchLng(context, checked)
                          const st = { ...setting }
                          st.lng = checked ? 'zh' : 'en'
                          setSetting(st)
                          config.writeData(JSON.stringify(st))
                        }}
                        className="switch-style"
                      />
                    </span>
                  </div>
                  <div className="setting-item">
                    <span>{context.t('startup')}</span>
                    <span
                      style={{
                        height: '100%',
                        position: 'relative',
                        left: '0',
                        top: '-4px'
                      }}
                    >
                      <Form.Item name="startup">
                        <Switch
                          onChange={(checked) => {
                            ipcRenderer.send('openAtLogin', checked)
                          }}
                          className="switch-style"
                        />
                      </Form.Item>
                    </span>
                  </div>
                </div>
              </Form>
              <Line top={10} bottom={6} />
              <div className="about-me main-font-color">
                <div>Copyright© 2025 {context.t('version')} 1.0 </div>
              </div>
            </Drawer>
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Title
